<template>
	<view class="content">
		<!-- F1: 顶部LOGO -->
		<image class="logo" mode="widthFix" src="../../static/img/logo.png" />
		<!-- F2: 手机号输入框组 -->
		<view class="input-group">
			<!-- 此处的type控制手机中弹出的键盘类型 -->
			<!-- 原生App/uni-app提供的输入框默认都是没有样式的 -->
			<input v-model="phone" type="text" placeholder="请输入手机号码" />
			<uni-icons class="icon left" type="phone-filled" color="#009900" size="60rpx" />
			<uni-icons class="icon right" type="clear" color="#1296DB" size="50rpx" />
		</view>
		<!-- F3: 密码输入框组 -->
		<view class="input-group">
			<!-- password：是否是密码输入框 -->
			<input v-model="pwd" type="text" :password="hidePwd" placeholder="请输入密码" />
			<uni-icons class="icon left" type="locked-filled" color="#090" size="60rpx" />
			<uni-icons class="icon right" :type="hidePwd ? 'eye-slash-filled' : 'eye-filled'" color="#1296db"
				size="50rpx" @click="hidePwd = !hidePwd" />
			<!-- 提示：事件处理时可以省略创建函数需要满足：①只有一句话  ②该句话以this开头 -->
		</view>
		<!-- F4: 登录按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- <button class="btn" @click="getProfile">获取我的个人档案</button> -->
		<!-- F5: 忘记密码 -->
		<navigator class="link" url="/pages/find-pwd/find-pwd" open-type="navigate">忘记密码</navigator>
		<!-- <button @click="jump">忘记密码</button> -->
		<!-- <navigator class="link" url="/pages/my/my" open-type="switchTab">用户中心</navigator> -->
	</view>
</template>

<script>
	import { userLogin, userProfile } from '../../service'
	export default {
		data() {
			return {
				hidePwd: true, //是否隐藏用户输入的密码
				phone: '13501234567', //电话号码
				pwd: '123456', //登录密码
			}
		},
		methods: {
			async getProfile(){
				//查看当前登录用户的个人档案
				let data = await userProfile()
				console.log(data)
			},
			async doLogin() {
				let phone = this.phone.trim()
				let pwd = this.pwd.trim()
				//验证电话是否为空、格式是否正确，如果有误则退出
				if (!phone) {
					uni.showToast({
						title: '电话不能为空', //提示文字
						icon: 'error', //图标
						duration: 3000, //持续时长
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(phone)) {
					uni.showToast({
						title: '电话格式错误', //提示文字
						icon: 'error', //图标
						duration: 3000, //持续时长
					})
					return
				}
				//验证密码是否为空，如果有误则退出
				if (!pwd) {
					uni.showToast({
						title: '密码不能为空',
						icon: 'error',
						duration: 3000
					})
					return
				}
				//把登录数据提交给服务器端数据API，执行异步的登录操作
				let data = await userLogin(phone, pwd)
				// console.log(data)
				if(data.code===2000){	//登录验证成功
					//把服务器返回给客户端的token保存在客户端缓存中(localStorage)
					uni.setStorageSync('userToken', data.token)
					//跳转到“首页”——切换页签
					uni.switchTab({
						url: '/pages/index/index'
					})
				}else {	//登录验证失败
					//弹出比较严重的提示框——模态对话框
					uni.showModal({
						title: '错误',				//标题
						content: '登录失败！错误原因：'+data.msg,  //内容
						showCancel: false,			//显示“取消”按钮吗？
						confirmText: '好的',			//“确定”按钮上的文字
						confirmColor: '#090',		//“确定”按钮的背景颜色
					})
				}
			},

			jump() {
				//导航跳转到“找回密码”页
				uni.navigateTo({
					url: "/pages/find-pwd/find-pwd"
				})

				//重定向跳转到“找回密码”页
				// uni.redirectTo({
				// 	url: "/pages/find-pwd/find-pwd"
				// })

				//切换页签到“用户中心”页
				// uni.switchTab({
				// 	url: "/pages/my/my"
				// })
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		padding: 0 $uni-spacing-row-lg;
	}

	.logo {
		width: 404rpx;
		display: block;
		margin: $uni-spacing-col-lg*6 auto $uni-spacing-col-lg*2;
	}

	@media screen and (min-height: 800px) {
		.logo {
			margin-top: $uni-spacing-col-lg*12;
		}
	}

	.input-group {
		margin-top: $uni-spacing-col-lg;
		padding: 0 $uni-spacing-row-lg;
		position: relative;

		input {
			background-color: $uni-bg-color-grey;
			width: 100%;
			height: 80rpx;
			border-radius: $uni-border-radius-lg;
			padding: 0 88rpx;
			font-size: $uni-font-size-base;
			border: 1px solid $zh-theme-dark;
		}

		.icon {
			position: absolute; //绝对定位的元素竖直方向上居中显示		
			top: 50%; //此处的50%指父元素高度的一半
			transform: translateY(-50%); //此处的50%指自身高度的一半

			&.left {
				left: $uni-spacing-row-base * 2;
			}

			&.right {
				right: $uni-spacing-row-base * 2;
			}
		}
	}

	.btn {
		// width: 100%;
		margin: $uni-spacing-col-lg*2 $uni-spacing-row-lg 0;
		background-color: $zh-theme-dark;
		color: $uni-text-color-inverse;
		font-size: $uni-font-size-lg;

		&:active {
			//选中按钮被激活(即按下)时的状态
			background-color: darken($zh-theme-dark, 6%);
			//SCSS函数：darken()用于将指定的颜色变深 
		}
	}

	.link {
		color: $zh-theme-dark;
		text-align: center;
		margin-top: $uni-spacing-col-lg*2;
	}
</style>
